<template>
    <div id="map"></div>
</template>
<script>
    import AMapLoader from '@amap/amap-jsapi-loader';

    export default {
        name: "map-view",
        mounted() {
            this.initMap();
        },
        data() {
            return {
                map: null,
                currentLocation: {
                    longitude: 116.397428,
                    latitude: 39.90923,
                },
            };
        },
        methods: {
            initMap() {
                window._AMapSecurityConfig = {
                    securityJsCode: "36d4eba49bc9031b1bba6b4a4bcad549",
                };
                AMapLoader.load({
                    key: '5003c0ed4d39fb52d6c64df5cf67d26d', // 高德地图API Key
                    version: '2.0', // 指定API版本
                    plugins: ["AMap.Scale","AMap.ElasticMarker","AMap.Geolocation","AMap.AutoComplete",
                        "AMap.PlaceSearch","AMap.Driving","AMap.Geocoder","AMap.CitySearch","AMap.MarkerCluster"],
                }).then((AMap) => {
                    this.map = new AMap.Map('map', {
                        zoom: 8, // 地图显示的缩放级别
                        center: [this.currentLocation.longitude, this.currentLocation.latitude], // 初始化地图时的中心点位置
                    });

                    // 添加地理定位插件
                    AMap.plugin('AMap.Geolocation', () => {
                        let geolocation = new AMap.Geolocation({
                            enableHighAccuracy: false, // 是否使用高精度定位，默认:true
                            timeout: 10000,          // 超过10秒后停止定位，默认：5s
                        });
                        this.map.setCenter([116,39]);

                        // 添加marker
                        let marker = new AMap.Marker({
                            map: this.map,
                            position: [116,39],
                        });
                        marker.setMap(this.map);
                        geolocation.getCurrentPosition((status, result) => {
                            console.log(result)
                            if (status == 'complete') {
                                this.currentLocation = {
                                    longitude: result.position.lng,
                                    latitude: result.position.lat,
                                };
                                this.map.setCenter([116,39]);

                                // 添加marker
                                let marker = new AMap.Marker({
                                    map: this.map,
                                    position: [116,39],
                                });
                                marker.setMap(this.map);
                            } else {
                                // 定位失败
                                console.error('定位失败', result.message);
                            }
                        });
                    });

                    let marker = new AMap.Marker({
                        map: this.map,
                        position: [116,39],
                    });
                    marker.setMap(this.map);

                    let marker1 = new AMap.Marker({
                        map: this.map,
                        position: [117,39],
                    });
                    marker1.setMap(this.map);

                    let marker2 = new AMap.Marker({
                        map: this.map,
                        position: [116,40],
                    });
                    marker2.setMap(this.map);

                    var path = [new AMap.LngLat(116,39), new AMap.LngLat(116,40), new AMap.LngLat(117,39)] //标准写法
                    var path = [ [116,39], [116,40], [117,39] ]; //简写
                    var polyline = new AMap.Polyline({
                        path : path,
                    })
                    this.map.add(polyline);
                }).catch(e => {
                    console.error(e);
                });
            },
        },
    };
</script>
<style scoped>
    #map {
        width: 100%;
        height: 500px;
    }
</style>
